<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: auto auto">
	<!--兼容降错-->
	当前浏览器不支持 Canvas，请更换浏览器后再试
</canvas>

<script>
// 初始化小球
const ball = { x: 512, y: 100, r: 20, g: 2, vx: -4, vy: 0, color: '#005588' }
window.onload = function() {
	const canvas = document.getElementById('canvas')
	// 绘图上下文环境 2D 绘图
	const context = canvas.getContext('2d')

	// 定时器动画
	setInterval(() => {
		// 渲染
		render(context)
		// 更新
		update()
	}, 50)
}
// 动画
function update() {
	ball.x += ball.vx
	ball.y += ball.vy
	ball.vy += ball.g

	// 碰撞底部
	if (ball.y >= 768 - ball.r) {
		ball.y = 768 - ball.r
		ball.vy = -ball.vy*0.6	// 摩擦力
	}
}
function render(ctx) {
	// 刷新 canvas 画布
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
	ctx.fillStyle = ball.color
	ctx.beginPath()
	ctx.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI)
	ctx.closePath()
	ctx.fill()
}
</script>
</body>
</html>


